<template>
  <div class="playlist" @click="hide" v-show="showFlag">
    <div class="list-wrapper" @click.stop>
      <div class="list-header">
        <h1 class="title">
          <i class="icon" :class="iconMode" @click="changeMode"></i>
          <span class="text">{{modeText}}</span>
          <span class="clear" @click="showConfirm">
            <i class="icon-clear"></i>
          </span>
        </h1>
      </div>
      <scroll ref="listContent" class="list-content" :data="sequenceList" :refreshDelay="refreshDelay">
        <transition-group name="list" ref="list" tag="ul">
          <li ref="listItem" class="item" v-for="(item, index) in sequenceList" :key="item.id" @click="selectItem(item,index)">
            <i class="current" :class="getCurrentIcon(item)"></i>
            <span class="text">{{item.name}}</span>
            <span @click.stop="toggleFavorite(item)" class="like">
                <i :class="getFavoriteIcon(item)"></i>
            </span>
            <span class="delete" @click.stop="deleteOne(item)">
              <i class="icon-delete"></i>
            </span>
          </li>
        </transition-group>
      </scroll>
      <div class="list-operate">
        <div class="add" @click="addSong">
          <i class="icon-add"></i>
          <span class="text">添加歌曲到队列</span>
        </div>
      </div>
      <div class="list-close" @click.stop="hide">
        <span>关闭</span>
      </div>
      <confirm ref="confirm" @confirm="confirmClear" text="是否清空播放列表" confirmBtnText="清空"></confirm>
      <add-song ref="addSong"></add-song>
    </div>
  </div>
</template>
<script>

import { mapGetters, mapMutations, mapActions } from 'vuex'
import scroll from 'base/scroll/scroll'
import { playMode } from 'common/js/config'
import confirm from 'base/confirm/confirm'
import { playerMixin } from 'common/js/mixin'
import addSong from 'components/add-song/add-song'

export default {
  mixins: [playerMixin],
  data() {
    return {
      showFlag: false,
      refreshDelay: 120
    }
  },
  computed: {
    modeText() {
      return this.mode === playMode.sequence ? '顺序播放' : this.mode === playMode.random ? '随机播放' : '单曲循环'
    },
    ...mapGetters([
      'playlist'
    ])
  },
  methods: {
    // 展示添加歌曲组件
    addSong() {
      this.$refs.addSong.show()
    },
    // 确认清空
    confirmClear() {
      this.deleteSongList()
    },
    showConfirm() {
      this.$refs.confirm.show()
    },
    deleteOne(item) {
      this.deleteSong(item)
      // 解决当列表为空的时候，我们再打开一首歌playlist会自动显示
      if (!this.playlist.length) {
        this.hide()
      }
    },
    // 滚动到当前播放的这首音乐
    scrollToCurrent(current) {
      const index = this.sequenceList.findIndex((song) => {
        return current.id === song.id
      })
      this.$refs.listContent.scrollToElement(this.$refs.list.$el.children[index], 300)
      // 不能这样写，因为新增加的最后一个item会加在listItem后面
      // this.$refs.listContent.scrollToElement(this.$refs.listItem[index], 300)
    },
    // 播放列表的元素被选中的时候播放那一首音乐
    selectItem(item, index) {
      // 随机播放的顺序不一样，所以index要重新计算
      if (this.mode === playMode.random) {
        index = this.playlist.findIndex((song) => {
          return song.id === item.id
        })
      }
      this.setCurrentIndex(index)
      this.setPlayingState(true)
    },
    // 得到正在播放的歌曲的播放图标
    getCurrentIcon(item) {
      if (this.currentSong.id === item.id) {
        return 'icon-play'
      }
    },
    show() {
      this.showFlag = true
      // 显示时刷新scroll组件，因为之前的刷新dom都不显示，重新计算scroll无效
      setTimeout(() => {
        this.$refs.listContent.refresh()
        this.scrollToCurrent(this.currentSong)
      }, 20)
    },
    hide() {
      this.showFlag = false
    },
    ...mapMutations({
      setPlayingState: 'SET_PLAYING_STATE'
    }),
    ...mapActions([
      'deleteSong',
      'deleteSongList'
    ])
  },
  components: {
    scroll,
    confirm,
    addSong
  },
  watch: {
    currentSong(newSong, oldSong) {
      if (!this.showFlag || newSong.id === oldSong.id) {
        return
      }
      setTimeout(() => {
        this.scrollToCurrent(newSong)
      }, 20)
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~common/stylus/variable'
@import '~common/stylus/mixin'

.playlist
  position: fixed
  top: 0
  bottom: 0
  left: 0
  right: 0
  z-index: 200
  background-color: rgba(0, 0, 0, 0.3)
  .list-wrapper
    position: absolute
    bottom: 0
    left: 0
    width: 100%
    background: #333
    .list-header
      padding: 20px 30px 10px 20px
      .title
        display: flex
        align-items: center
        .icon
          margin-right: 10px
          font-size: 30px
          color: rgba(255, 205, 49, 0.5)
        .text
          flex: 1
          font-size: 14px
          color: hsla(0, 0%, 100%, 0.5)
        .clear
          .icon-clear
            font-size: 14px
            color: hsla(0, 0%, 100%, 0.3)
  .list-content
    max-height: 240px
    overflow: hidden
    .item
      display: flex
      align-items: center
      height: 40px
      padding: 0 30px 0 20px
      overflow: hidden
      &.list-enter-active, &.list-leave-active
        transition: all 0.1s
      &.list-enter, &.list-leave-to
        height: 0
      .current
        flex: 0 0 20px
        width: 20px
        font-size: 12px
        color: rgba(255, 205, 49, 0.5)
      .text
        flex: 1
        no-wrap()
        font-size: 14px
        color: hsla(0, 0%, 100%, 0.3)
      .like
        position: relative
        margin-right: 15px
        font-size: 12px
        color: #ffcd32
      .delete
        position: relative
        font-size: 12px
        color: #ffcd32
  .list-operate
    width: 140px
    margin: 20px auto 30px
    .add
      display: flex
      align-items: center
      padding: 8px 16px
      border: 1px solid hsla(0, 0%, 100%, 0.5)
      border-radius: 100px
      color: hsla(0, 0%, 100%, 0.5)
      .icon-add
        margin-right: 5px
        font-size: 10px
      .text
        font-size: 12px
  .list-close
    text-align: center
    line-height: 50px
    background: #222
    font-size: 16px
    color: hsla(0, 0%, 100%, 0.5)
</style>
